window.addEventListener('load', function () {
  var focus = document.querySelector('.focus');
  var ul = focus.children[0];
  var w = focus.offsetWidth;
  var index = 0;
  var ol = document.querySelector('.focus ol')
  var timer = setInterval(function () {
    index++;
    var translatex = -index * w;
    ul.style.transition = 'all .3s';
    ul.style.transform = 'translateX(' + translatex + 'px)';
  }, 2000);
  ul.addEventListener('transitionend', function () {
    if (index >= 3) {
      index = 0;
      ul.style.transition = 'none';
      var translatex = -index * w;
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }
    else if (index < 0) {
      index = 2;
      ul.style.transition = 'none';
      var translatex = -index * w;
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }
    ol.querySelector('li.current').classList.remove('current');
    ol.children[index].classList.add('current');
  })
  // 手指滑动模块
  var startX = 0;
  var moveX = 0;
  ul.addEventListener('touchstart', function (e) {
    startX = e.targetTouches[0].pageX;
    clearInterval(timer);
  })
  ul.addEventListener('touchmove', function (e) {
    moveX = e.targetTouches[0].pageX - startX;
    var translatex = -index * w + moveX;
    ul.style.transition = 'none';
    ul.style.transform = 'translateX(' + translatex + 'px)';
    e.preventDefault();
  })
  ul.addEventListener('touchend', function (e) {
    if (moveX > 50) {
      index--;
    }
    else if (moveX < -50) {
      index++
    }
    var translatex = -index * w;
    ul.style.transition = 'all .3s';
    ul.style.transform = 'translateX(' + translatex + 'px)';
    clearInterval(timer);
    timer = setInterval(function () {
      index++;
      var translatex = -index * w;
      ul.style.transition = 'all .3s';
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
  })
})